<template>
  <div class="course-list-home">
    <FilterParam @e-courseList="refreshList" />
    <NewAndHot :totle="pageObj.count" @e-newAndHot="refreshListTwo" />
    <div class="webheart course-list-wrap" v-loading="loading">
      <el-empty v-show="!tableData.length" description="暂无数据"></el-empty>
      <List v-if="tableData.length" :tableData="tableData" />
      <Pagination
        v-show="parseInt(pageObj.count) > 0"
        :total="parseInt(pageObj.count)"
        @change="getList"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
      />
    </div>
  </div>
</template>
<script>
import { openApiSysCourseQuery } from '@/api/openApi'
export default {
  components: {
    NewAndHot: () => import('../../components/NewAndHot.vue'),
    FilterParam: () => import('../../courseLibrary/courseList/FilterParam.vue'),
    List: () => import('./List.vue'),
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 12,
        courseType: 2,
        status: 1,
        auditStatus: 2,
      },
      tableData: [],
      pageObj: {},
      loading: false,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      openApiSysCourseQuery(this.listQuery).then((res) => {
        setTimeout(() => {
          this.tableData = res.data.data
          this.pageObj = res.data
          this.loading = false
        }, 200)
      })
    },
    refreshList(v) {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    },
    refreshListTwo(v) {
      if (v == 1) {
        //最新
        Object.assign(this.listQuery, {
          sortOrder: '',
          recommended: '',
        })
      } else if (v == 2) {
        //最热
        Object.assign(this.listQuery, {
          sortOrder: 'clickNum',
          recommended: '',
        })
      } else {
        //推荐
        Object.assign(this.listQuery, {
          recommended: '1',
          sortOrder: 'recommended',
        })
      }
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss">
.course-list-home {
  padding-bottom: 60px;
  .course-list-wrap {
    min-height: 500px;
  }
}
</style>